<template>
  <div>
    <div>
      <van-nav-bar fixed>
        <template v-slot:left>
            <img src="@/assets/toutiao_logo.png" alt="" class="tu">
        </template>
        <template #right>
            <van-icon name="search" size="0.48rem" color="white" @click="search"/>
        </template>
      </van-nav-bar>
    </div>
    <div class="man">
       <van-tabs  animated  sticky
        offset-top="1.226667rem" v-model="channelId" class="tabss">
            <van-tab v-for="(item) in userchanlist" :key="item.id" :title="item.name" :name="item.id">
                <artilist :changeid="channelId" :id='item.id'></artilist>
            </van-tab>
     </van-tabs>
      <van-icon name="plus"  class='abc' @click="jiahao"/>
    </div> 
    <!-- 频道管理弹出层 -->
    <van-popup v-model="show" get-container='body' class='pindao'>
           <van-nav-bar title="黑马频道">
                <template #right>
                  <van-icon name="cross" class="guanbi" @click="tuichu"/>
                </template>
           </van-nav-bar>
           <div class="wode">
              <p>我的频道 点击{{biantext2}}频道</p>
              <p @click="bianji">{{biantext}}</p>
           </div>
           <div class="wode2">
             <div v-for="(item,index) in userchanlist" :key="item.id">
                <div @click="jinru(item,index)" :class="{active:item.id==channelId}">{{item.name}}</div>
                <van-icon name="cross"  class="guan" v-show="xiaoguan && index>0" />
             </div>
           </div>
           <div class="wode">
              <p>点击添加更多的频道:</p>
           </div>
           <div class="wode3">
             <div v-for="item in gengduo" :key="item.id">
               <div @click="gengduobiaoqian(item)">{{item.name}}</div>
               <van-icon name="plus"  v-show="xiaoguan"/>
             </div>
           </div>
    </van-popup>
  </div>
</template>

<script>
import {getuserApi,getCannelApi,updateChannelSApi,shanchuApi} from '@/api/index.js'
import artilist from '@/views/home/connts/artilist.vue'
export default {
  activated(){//此函数代表组件激活时的函数,只有绑定了组件缓存才能使用
     window.onscroll=this.scroll  //给window绑定监听滚动条滚动事件
     document.documentElement.scrollTop = this.$route.meta.scrollt
  },
  deactivated(){ //在此页面失活的时候移出此事件
    window.removeEventListener('scroll',this.scroll) 
  },
  async mounted(){
    const req=await getuserApi()  //获取频道
      this.userchanlist=req.data.data.channels
    const res=await getCannelApi()  //获取所有频道列表
      this.usersuoyou=res.data.data.channels
   },
    data(){
      return{
        channelId:0, //tab标签栏默认索引  name属性激活频道id 默认频道id为0
        userchanlist:[],   //用户选择的频道列表
        show:false,  //用来控制频道管理页的弹出层显示隐藏
        usersuoyou:[],  //所有频道的列表
        biantext:'编辑',  //编辑切换文本
        xiaoguan:false ,  //隐藏小关闭图标
        biantext2:'进入',  //进入和删除文字切换
        scrolllist:{}    //存储每个频道滚动条滚动的距离 {频道id:频道滚动距离}
      }
    },
    components:{
      artilist
    },
    methods:{
      jiahao(){//加号的点击方法
          this.show=true
      },
      tuichu(){//退出弹出层的方法
         this.show=false
         this.xiaoguan=false
         this.biantext='编辑'
         this.biantext2='进入'
      },
      bianji(){//点击编辑
         if(this.biantext=='编辑'){ //代表点击编辑文字
           this.biantext='完成'
           this.xiaoguan=true
           this.biantext2='删除'
         }else{  //代表点击完成文字
            this.biantext='编辑'
            this.xiaoguan=false
            this.biantext2='进入'
         }
      },
     async jinru(obj){//点击我的标签时的函数
        if(this.biantext=='编辑'){ //代表编辑状态下点击标签
            this.show=false   //让频道管理隐藏
            this.channelId=obj.id
        }else if(this.biantext=='完成' && obj.id!=0){ //代表删除状态下点击标签  不能删除id为0的推荐标签
               let index=this.userchanlist.findIndex((aoligei)=>aoligei.id==obj.id)
                this.userchanlist.splice(index,1)  //将数组对应的下标进行删除
                await shanchuApi(obj.id) //将删除的id发送给给服务器就行了
        }
      },
     async gengduobiaoqian(item){  //点击更多标签时的函数
        if(this.biantext=='完成'){ //
        this.userchanlist.push(item)
        //还要把最新的数据发送给后台
        await updateChannelSApi({  //添加完毕后将最新用户选择的频道发送给服务器进行更新
          channels:this.userchanlist
        })
        }
      },
      search(){//搜索页面路由跳转
           this.$router.push('/search')
      },
      scroll(){
         this.$route.meta.scrollt=document.documentElement.scrollTop
         this.scrolllist[this.channelId]=document.documentElement.scrollTop
      }
    },
    computed:{
        gengduo(){//利用计算属性算出来所有频道的数组减去已有频道的数组并保存到一个新的数组里面
       
          //  let arr=[] //准备一个空数组
          //  this.usersuoyou.forEach((item)=>{ //先将所有频道的数组进行遍历
          //      let ddd=this.userchanlist.every((items)=>{ //然后遍历已经添加的频道的数组,将他们里面每一项进行对比,必须每一项都不同才能添加到arr数组里面
          //           return items.name!= item.name
          //       })
          //     if(ddd){//如果ddd为true则表示所有频道里面没被使用的频道,加入一个空数组里面用来展示可添加的频道
          //       arr.push(item)
          //     }
          //  })
           return this.usersuoyou.filter((item)=>{ //定义一个过滤器筛选
            return this.userchanlist.every((items)=>{
                return  item.name!=items.name
            })
          })
        }
    },
    watch:{
      channelId(){
         //tab栏切换后改变滚动条位置
         //因为切换的一瞬间页面的高度为0,所以设置页面滚动条的高度没意义,所以滚动条会初始化最底部
         //延迟一下再设置滚动条高度,利用nextTick异步设置滚动条高度,确保dom元素已经把页面内容的高度渲染
          this.$nextTick(()=>{
          document.documentElement.scrollTop=this.scrolllist[this.channelId]
          })
      }
    }
}
</script>

<style lang="less" scoped>
.van-nav-bar{  //此class类名是组件内部的类名
  background-color:#007bff;
}
.tu{ 
  width: 100px;
  height: 30px;
}
.man{padding-top:44px}
/deep/ .van-tabs__line{ //  /deep/是less的语法 如果开启了scoped 默认找不到属性后面选择器 所以找不到文字的选择器
  background-color: #007bff;
}
/deep/ .van-tabs__wrap{
  padding-right: 30px;
  background-color:white;
}
// /deep/ .van-tabs__content{
//   padding-top: 46px;
// }
.abc{
  position:fixed;
  z-index: 999;
  right: 0px;
  top: 56px;
  font-size:20px
}
.pindao{
  width: 100vw;
  height: 100vh;
}
/deep/ .van-nav-bar__title{
    color:white
  }
.guanbi{
  color:white
}
.wode{
  display: flex;
  justify-content: space-between;
  p{
    padding:0;
    margin:0;
    font-size: 20px;
  }
}
.wode2{
  display: flex;
  flex-wrap: wrap;
  div{
    position: relative;
    div{
     font-size:10px;
     width: 87px;
     height:37px;
     background-color:rgb(210, 206, 206);
     margin-top: 10px;
     margin-left: 5.5px;
     display: flex;
     justify-content: center;
     align-items: center;
     };
    .guan{
       font-size:10px;
       position:absolute;
       right:0px;
       top: 10px;
    }
  }
}
.wode3{
  display: flex;
  flex-wrap: wrap;
  div{
    position: relative;
     div{
     font-size:10px;
     width: 87px;
     height:37px;
     background-color:rgb(210, 206, 206);
     margin-top: 10px;
     margin-left: 5px;
      display: flex;
     justify-content: center;
     align-items: center;
     };
     i{
       font-size:10px;
       position:absolute;
       top: 23px;
       left:10px;
     }
  }
}
.active{
  color:red;
}

</style>

